import { signIn } from "next-auth/react";
import { CheckCircleOutlined } from "@ant-design/icons";
import { Form, Input, Button, Card, Cascader } from "antd";
import { geneResidence } from "./gene-residence";

const residences = [
  {
    value: "community_1",
    label: "小区一",
    children: [
      {
        value: "building_first",
        label: "一号楼",
        children: [
          {
            value: "unit_first",
            label: "一单元",
            children: [
              {
                value: "room1",
                label: "101",
              },
              {
                value: "room2",
                label: "102",
              },
              {
                value: "room3",
                label: "103",
              },
              {
                value: "room",
                label: "104",
              },
            ],
          },
          {
            value: "unit2",
            label: "二单元",
          },
          {
            value: "unit2",
            label: "三单元",
          },
        ],
      },
      {
        value:'building2',
        label:'二号楼',
      },
      {
        value:'building3',
        label:'三号楼',
      },
      {
        value:'building4',
        label:'四号楼',
      }
    ],
  },
  {
    value: "community_2",
    label: "小区二",
  },
  {
    value: "community_3",
    label: "小区三",
  },
];

const AddPersonForm = () => {
  // const residences = new Array();
  // residences.concat(geneResidence());
  // console.log(geneResidence());

  const onFinish = (values: any) => {
    const telephone = values.username;
    const password = values.password;
    signIn("credentials", { telephone, password, callbackUrl: "/home" });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Card title="添加人员">
      <Form
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="姓名"
          name="person_name"
          rules={[
            {
              required: true,
              message: "请输入姓名",
            },
            { type: "string" },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="手机号"
          name="telephone"
          rules={[
            {
              required: true,
              message: "请输入手机号",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item name="house" label="住房" required>
          <Cascader options={residences} />
        </Form.Item>

        <Form.Item labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
          <Form.Item style={{ display: "inline-flex" }}>
            <Button
              type="primary"
              htmlType="submit"
              icon={<CheckCircleOutlined />}
            >
              提交
            </Button>
          </Form.Item>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default AddPersonForm;
